出处：掘金

原作者：ErpanOmer

在前端性能优化领域，资源提示（Resource Hints）是一种极具价值但常被忽视的手段，而其中 <link rel="preconnect"> 则是最具代表性的优化指令之一。它能够显著降低网络请求的首字节到达时间（TTFB），优化页面关键资源加载路径。本文将从浏览器网络连接过程入手，深入剖析 <link rel="preconnect"> 的作用原理，并展示其在实际工程中的应用价值

现代网页加载的连接瓶颈：TCP 与 TLS

在浏览器加载远程资源（如字体、CDN 脚本、API 数据等）时，通常会经历以下网络阶段：

DNS 解析：将域名（如 fonts.googleapis.com）解析为 IP 地址
TCP 三次握手：客户端与服务器建立可靠的连接
TLS 握手（HTTPS）：协商密钥，建立加密通道
发送 HTTP 请求：浏览器发出请求头，请求资源
接收响应数据：服务器返回资源，浏览器解析并渲染

每个步骤都存在不可忽视的延迟，尤其是 TCP 和 TLS 建立阶段，对首次请求影响最大。一般情况下，浏览器只有在真正遇到某个资源时，才开始以上连接流程

核心原理：提前建立连接

<link rel="preconnect"> 的本质，是告诉浏览器：

"我很快会从这个域名请求资源，请你现在就建立连接"

一旦浏览器解析到这个标签，它会立刻执行如下动作：

进行 DNS 查询，解析域名
发起 TCP 三次握手，建立连接通道
若为 HTTPS，完成 TLS 握手
连接建立后将保持一段时间（通常是 10 秒或更久），等待正式请求发起

示例代码：

<!-- 提前为 Google Fonts 建立连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

其中第二行的 crossorigin 表示该资源为跨域资源，TLS 握手时需传递 Origin 头部，确保资源使用正确的证书和 CORS 策略

TCP 握手优化原理详解

以未使用 preconnect 的流程为基准：

用户进入页面
HTML 加载并解析到 CSS 文件中的字体请求
浏览器发起 DNS → TCP → TLS → HTTP 请求 → 等待响应

假设：

DNS 解析耗时 50 ms
TCP 握手耗时 100 ms（包括 RTT）
TLS 握手耗时 200 ms

单就连接建立已消耗 350 ms，还不包含资源传输

而使用 preconnect 后：

浏览器在 HTML 一开始就发起 DNS/TCP/TLS
后续请求字体资源时，连接已就绪
省略 300~400 ms 的连接延迟，TTFB 提前

这种优化在首屏字体加载、异步 JS 资源加载、第三方 CDN 请求中尤为明显

与 `dns-prefetch`、`preload` 等的区别

指令	作用	是否建立 TCP	是否建立 TLS
`dns-prefetch`	提前 DNS 查询	否	否
`preconnect`	提前建立连接	是	是（HTTPS）
`prefetch`	预取未来可能使用的资源	是	是
`preload`	明确标识当前页面会用到的资源	是	是

可见，preconnect 是在连接建立阶段介入最深的一种

使用场景与最佳实践

适用场景：

加载外部字体（如 Google Fonts）
引入第三方库（如 CDN 加载 Vue、React、jQuery）
向远程 API 服务器发送请求（跨域请求尤为关键）

不建议用于：

页面中不会使用该域名的请求（浪费连接资源）
与主域同源资源（浏览器已自动优化）

实践技巧：

放在 <head> 最上方，越早触发越有效
为 HTTPS 资源加上 crossorigin 属性
控制数量（一般不超过 6 个），避免连接池资源浪费

浏览器支持情况：几乎所有现代浏览器（包括 Chrome、Firefox、Edge、Safari）均原生支持 preconnect。IE 11 不支持，影响可忽略

结合 Web 性能指标提升

使用 preconnect 能有效缩短关键资源的 TTFB 时间，从而间接提升：

First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
Speed Index

在 Google PageSpeed Insights、Lighthouse 中都能看到这类提示

总结

<link rel="preconnect"> 是一个简单却极具威力的性能优化工具。它通过提前建立 TCP/TLS 连接，有效压缩了远程资源的加载时间，提升了用户体验和页面响应速度

它不创造连接，但它节省了等待